<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="obj.name = 'rose' ">修改obj.name</button>
        <button @click="obj.age = 12 ">修改obj.age</button>
        <button @click=" obj = { name:'rose', age: 12 } ">修改obj的指向</button>
        <p>{{ obj }}</p>
    </div>

    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                obj: {
                    name: 'jack',
                    age: 16
                }
            },
            watch: {
                // 侦听obj是否有变化
                // 这里侦听不到对象里属性的改变，只能侦听这个指向是否发生改变
                // 所以对象里的属性改变了是不会触发的，只有当指向发生改变才会触发
                obj () {
                    console.log('obj被修改了')
                },

                // // 我就是想侦听属性改变，怎么办？
                // "obj.name" (newVal, oldVal) {
                //     console.log('name改变了',newVal, oldVal)
                // },

                // 如果要侦听对象里的所有属性，像上面这个写法就麻烦了
                // 因为有10个属性，就要写10次
                // 能不能有一劳永逸的办法，只要写一次，不管对象内属性如何变化都能侦听
                // 有：深度侦听
                obj: {
                    // 开启深度侦听
                    deep: true,
                    // 当对象里任何属性发生改变，就会调用这个handler回调函数
                    // 开启对象的深度侦听，这两个参数就没意义了
                    // 因为对于对象而言，其实他的指向从来没变过，所以newVal和oldValue是同一个
                    handler (newVal, oldVal) {
                        console.log('obj里有属性变啦', newVal, oldVal, newVal === oldVal) // true
                    },

                    // 是否开启初始化调用
                    // 页面打开是否自动调用一次handler回调函数，给true调用
                    // 给false或者不写，一定等到数据有改变才调用
                    immediate: true
                }
            }
        })
    </script>
</body>
</html>